<template>
  <div class="home">
    <top-nav></top-nav>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="orange">
      <van-swipe-item v-for="(item, index) in banners" :key="index">
        <img :src="item.pic" class="swiperImg" alt="" />
      </van-swipe-item>
    </van-swipe>
    <icon-list></icon-list>
    <music-list></music-list>
  </div>
</template>

<script>
// @ is an alias to /src
import topNav from "@/components/Home/topNav.vue";
import iconList from "@/components/Home/iconList.vue";
import musicList from "@/components/Home/musicList.vue";
import { Swipe, SwipeItem } from "vant";
import { getBanners } from "../request/api.js";

export default {
  name: "Home",
  components: {
    [topNav.name]: topNav,
    [iconList.name]: iconList,
    [musicList.name]: musicList,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      banners: [],
    };
  },
  created() {
    this.getBanner();
  },
  methods: {
    async getBanner() {
      const res = await getBanners({type: 1});
      this.banners = res.banners;
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  .my-swipe {
    width: 7.2rem;
    height: 3rem;
    margin: 0 auto;
    border-radius: 0.1rem;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;

      .swiperImg {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
